<template>
  <div id='TerrainContainer'></div>
</template>

<script>
export default {
  data() {
    return {
      viewer: null
    }
  },
  mounted() {
    this.initCesium()
    this.addCartesian2(this.viewer)
  },
  methods: {
    initCesium() {
      this.viewer = new Cesium.Viewer('TerrainContainer', {
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        scene3DOnly: true,
        timeline: false,
        selectionIndicator: false, //是否显示选取指示器组件
        shouldAnimate: false, //自动播放动画控件
        shadows: true, //是否显示光照投射的阴影
        terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY, //地质接收阴影
        sceneMode: Cesium.SceneMode.SCENE3D,
        terrainProvider: new Cesium.CesiumTerrainProvider({//地质开挖必须是cesium提供的地形
          url: Cesium.IonResource.fromAssetId(1),
          requestVertexNormals: true,//顶点法线效果
          requestWaterMask: true//水效果
        })
      })
      this.viewer._cesiumWidget._creditContainer.style.display = 'none' //	去除版权信息
    },
    addCartesian2(viewer) {

      let box1 = new Cesium.BoxGeometry({
        vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
        maximum : new Cesium.Cartesian3(250000.0, 250000.0, 250000.0),
        minimum : new Cesium.Cartesian3(-250000.0, -250000.0, -250000.0)
      });
      let boxGeometry1 = Cesium.BoxGeometry.createGeometry(box1);

      let boxInstance1 = new Cesium.GeometryInstance({
        geometry : boxGeometry1,
        modelMatrix : Cesium.Matrix4.multiplyByTranslation(Cesium.Transforms.eastNorthUpToFixedFrame(
          Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883)), new Cesium.Cartesian3(0.0, 0.0, 0.0), new Cesium.Matrix4()),
        attributes : {
          color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
        },
        id : 'bottom'
      });

      let box2 = new Cesium.BoxGeometry({
        vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
        maximum : new Cesium.Cartesian3(250000.0, 250000.0, 250000.0),
        minimum : new Cesium.Cartesian3(-250000.0, -250000.0, -250000.0)
      });
      let boxGeometry2 = Cesium.BoxGeometry.createGeometry(box2);

      let boxInstance2 = new Cesium.GeometryInstance({
        geometry : boxGeometry2,
        modelMatrix : Cesium.Matrix4.multiplyByTranslation(Cesium.Transforms.eastNorthUpToFixedFrame(
          Cesium.Cartesian3.fromDegrees(-60.59777, 40.03883)), new Cesium.Cartesian3(0.0, 0.0, 0.0), new Cesium.Matrix4()),
        attributes : {
          color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.BLUE)
        },
        id : 'bottom'
      });


      let primitive = new Cesium.Primitive( {
        geometryInstances : [boxInstance1,boxInstance2],
        asynchronous:false,//是否采用多线程
        appearance : new Cesium.PerInstanceColorAppearance({
          translucent : false,
          closed : true
        })
      });

      let matrix4 = new Cesium.Matrix4();
      let modelMatrix = boxInstance1.modelMatrix;

      //方式一创建旋转矩阵
      /*
      * y’ = y cosα- z sinα
        z’ = y sinα+ z cosα
        x’ = x
      * */
      var cosAngle = Math.cos(Cesium.Math.toRadians(45));
      var sinAngle = Math.sin(Cesium.Math.toRadians(45));
      const rotateXnMat41 = Cesium.Matrix4.fromArray([
        1, 0.0, 0.0, 0.0,
        0.0, cosAngle, -sinAngle, 0.0,
        0.0, sinAngle, cosAngle, 0.0,
        0.0, 0.0, 0.0, 1.0
      ]);

      //Cesium.Matrix4.multiply(modelMatrix,rotateXnMat41,matrix4)

      //方式二创建旋转矩阵

      //RotateX为旋转角度，转为弧度再参与运算
      var rotateXnMat42 = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(45));
      //矩阵计算
      Cesium.Matrix4.multiplyByMatrix3(modelMatrix,rotateXnMat42,matrix4);

      boxInstance1.modelMatrix = matrix4
      viewer.scene.primitives.add(primitive);
    }
  }
}
</script>
<style scoped>
#TerrainContainer {
  height: 100%;
  width: 100%;
  background-color: red;
}
</style>
